/*-------------------   外部导入   -------------------------------------------------------------------*/

import { Card, Button, Col, Row, Modal, Input, Space, Table, Tag, message, } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import { useState, useEffect } from "react";
import type { ColumnsType } from 'antd/es/table';
// 导入样式
import "../../../../assets/style/home.scss";
// 导入接口
import { getCarPayHistoryRecordRenewCar } from "../../../../api/admin";
/*-------------------   外部导入   -------------------------------------------------------------------*/

function ChooseAParkingSpace(props: any) {
  const { Search } = Input;
  /*-------------------   定义数据   -------------------------------------------------------------------*/
  // 获取到的车辆信息
  const [CarPaylist, setCarPayList] = useState()
  // 车位渲染信息  组件
  const [list, setList] = useState({
    area: "",
    communityId: "",
    createTime: "",
    num: "",
    paId: "",
    parkingType: "",
    parkingTypeName: "",
    psId: "",
    remark: "",
    state: "",
    stateName: "",
  });
  // 模态框是否打开
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 表格数据
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: '停车场ID',
      dataIndex: 'paId',
      key: 'paId'
    },
    {
      title: '停车位ID',
      dataIndex: 'psId',
      key: 'psId',
    },
    {
      title: '停车场编码',
      dataIndex: 'remark',
      key: 'remark',
    },
    {
      title: '停车位编码',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '车位类型',
      key: 'parkingTypeName',
      dataIndex: 'parkingTypeName',
    },
    {
      title: '车位状态',
      key: 'stateName',
      dataIndex: 'stateName',
    },
    {
      title: '面积',
      key: 'area',
      dataIndex: 'area',
    },
    {
      title: '操作',
      key: 'createTime',
      render: (_, record) => (
        <Button type="primary" onClick={() => { setlist(record) }} > 选择</Button >
      ),
    },
  ];
  /*-------------------   定义数据   -------------------------------------------------------------------*/

  /*-------------------   定义方法   -------------------------------------------------------------------*/
  // 获取车辆信息
  const getCarPay = () => {
    var obj = {
      page: 1,
      row: 10,
      communityId: 2023032658120002,
      num: "",
      areaNum: "",
      carNum: "",
      state: "F"
    };
    setIsModalOpen(true);
    getCarPayHistoryRecordRenewCar(obj).then((res) => {
      console.log(res.data.parkingSpaces);
      setCarPayList(res.data.parkingSpaces)
    });
  };

  // 查询事件
  const onSearch = (e: any) => {
    console.log(e)
  }
  // 修改list
  const setlist = (arr: any) => {
    console.log(arr)
    setList(arr)
    setIsModalOpen(false);
  }
  // 下一步
  const nextStep = () => {
    if (list.paId != "") {
      props.setCurrent(1);
    } else {
      message.error("请选择车位")
    }
  }
  /*-------------------   定义方法   -------------------------------------------------------------------*/




  return (
    <div className="ChooseAParkingSpace">
      <Card
        title="停车位信息"
        extra={
          <Button type="primary" icon={<SearchOutlined />} onClick={getCarPay}>
            选择车位
          </Button>
        }
      >
        <Modal title="选择停车位" width={800} open={isModalOpen} okType="primary" okText="确定" cancelText="取消">
          <div className="top">
            <Search placeholder="请输入停车位编号" onSearch={(e) => { onSearch(e) }} enterButton />
          </div>
          <Table columns={columns} dataSource={CarPaylist} size="small" />;
        </Modal>
        <Row gutter={24}>
          <Col span={8}>
            <ul>
              <li>
                <span>车位ID：</span>
                <span>
                  {list.psId}
                </span>
              </li>
              <li>
                <span>车位状态：</span>
                <span>
                  {list.stateName}
                </span>
              </li>
            </ul>
          </Col>
          <Col span={8}>
            <ul>
              <li>
                <span>编号：</span>
                <span>
                  {list.num}
                </span>
              </li>
              <li>
                <span>面积：</span>
                <span>
                  {list.area}平方米
                </span>
              </li>
            </ul>
          </Col>
          <Col span={8}>
            <ul>
              <li>
                <span>停车场：</span>
                <span>
                  {list.areaNum}
                </span>
              </li>
              <li>
                <span>备注： </span>
                <span>
                  {list.remark}
                </span>
              </li>
            </ul>
          </Col>
        </Row>
      </Card>
      <Button
        type="primary"
        onClick={() => {
          nextStep();
        }}
      >
        下一步
      </Button>
    </div>
  );
}

export default ChooseAParkingSpace;
